var Fight = function(){
  this.playerView = {node: null};
  this.fightView = {node: null};
};

Fight.prototype.setupPlayerView = function(/*object*/ player){
  
  this.playerView.node = document.createElement("div");
  $(this.playerView).addClass("playerView");
  
  
  var img = document.createElement("img");
  img.src = "images/guiproto/player-back-big.png";
  
  var title = document.createElement("h3");
  title.innerHTML = player.name;
  
  
  
  var spellBar = document.createElement("div");
  for(var i = 0; i < player.availableSpells.length; i++){
    $(spellBar).append("<span class='spellIcon'>" + player.availableSpells[i].name + "</span>");
  }
  $(spellBar).append("<div class='clear'></div>");
  
  $(this.playerView.node).append(img);
  $(this.playerView.node).append(title);
  $(this.playerView.node).append(spellBar);
  $(this.fightView.node).append(this.playerView.node);
  
};

Fight.prototype.initFightView = function(){
  var log = document.createElement("div");
  $(log).addClass("fightLog");
  
  var enemyContainer = document.createElement("div");
  $(enemyContainer).addClass("enemyContainer");
};

Fight.prototype.init = function(){
  var fightLayer = document.createElement("div");
  $(fightLayer).css({
    width: "100%",
    backgroundColor: "black",
    height: "100%",
    opacity: "0.95",
    position: "absolute",
    top: 0,
    left: 0,
    zIndex: 555
  });
  this.fightView.node = document.createElement("div");
  $(fightLayer).append(this.fightView.node);
  $("body").append(fightLayer);
  
  $(this.fightView.node).css({
    margin: "auto",
    marginTop: 30,
    backgroundColor: "#fff",
    width: 1,
    height: 1    
  });
  
  $(this.fightView.node).animate({
    width: 900,
    height: 500,
    margin: "auto",
  }, 1000, function(){
    // now that the canvas is drawn, we can start with the fun
  });
  
  that = this;
  $.ajax("javascripts/dummydata/player.json", {
    error: function(jqXHR, textStatus, errorThrown){
      console.dir(errorThrown);
    },
    context: this,
    success: that.setupPlayerView
  });
};

$(document).ready(function(){
  $("#startfight").click(function(){
    var fight = new Fight();
    fight.init();
  });
});